<template>
  <section class="set-options">
    <ul>
      <draggable :list="list" :animation="340" handle=".move" group="group">
        <li v-for="(item, index) in list" :key="index">
          <div class="move">
            <div class="icon">
              <svg-icon icon-class="move-icon" />
            </div>
          </div>
          <div class="values">
            <el-input v-model="item.name" size="small" placeholder="选项名"></el-input>
            <el-input v-model="item.value" size="small" placeholder="选项值"></el-input>
          </div>
          <div class="remove">
            <el-tooltip effect="dark" content="移除" placement="top">
              <div class="icon" @click="remove(index)">
                <i class="el-icon-delete-solid"></i>
              </div>
            </el-tooltip>
          </div>
        </li>
      </draggable>
    </ul>
    <section class="buttons">
      <div class="left">
        <el-button type="text" size="small" icon="el-icon-plus" @click="insert">添加选项</el-button>
      </div>
      <div class="right"></div>
    </section>
  </section>
</template>
<script>
import emitter from '@/utils/emitter'
import draggable from 'vuedraggable'
export default {
  name: 'VSetOptions',
  components: { draggable },
  mixins: [emitter],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  watch: {
    list: {
      handler (v) {
        if (v) {
          this.handleChange()
        }
      },
      deep: true
    }
  },
  data () {
    return {
      step: this.option.value.length,
      list: this.option.value
    }
  },
  methods: {
    insert () {
      this.step += 1
      this.list.push({
        name: `选项${this.step}`,
        value: this.step + ''
      })
    },

    batch () { },

    reset () {
      this.value = ''
    },

    remove (i) {
      if (this.list.length == 1) {
        this.$message.warning('最少保留一个选项')
        return false
      }
      this.list.splice(i, 1)
    },

    setValue (v) {
      this.$set(this, 'list', v)
    },

    getValue () {
      return this.list
    },

    handleChange () {
      const { list } = this
      this.dispatch_event('filed-value-change', list)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/center.scss';
@import '@/styles/utility/iconbtn.scss';
.set-options {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      .move {
        flex-shrink: 0;
        cursor: move;
        padding-right: 5px;
        color: $f4;
        z-index: 7;
        font-size: 12px;
      }

      .values {
        flex: 1;
        @include center();
        /deep/ {
          .el-input {
            margin-right: 5px;
          }
        }
      }

      .remove {
        flex-shrink: 0;
        .icon {
          cursor: pointer;
          display: inline-block;
          width: 30px;
          text-align: center;
          color: $f3;
          z-index: 7;
          font-size: 12px;
        }
      }
    }
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
